<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生成海报</title>
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <meta name="viewport"
          content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="app-mobile-web-app-capable" content="yes"/>
    <meta name="app-mobile-web-app-status-bar-style" content="black-translucent"/>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_772560_ztmkzsyi5j.css">
    <link rel="stylesheet" href="css/posters.css">

</head>
<body>
<div id="app" v-cloak>
    <div class="c-loading" v-if="loading">
        <div class="loading-icon"></div>
    </div>
    <div v-else>
    <div class="navbar" id="tab">
        <a href="javascript:void(0);" class="nav_item tc" v-on:click="setTab(1)" v-bind:class="{active:tab==1}">
            <span>默认</span>
        </a>
        <a id="behave" href="javascript:void(0);" class="nav_item tc" v-on:click="setTab(2)" v-bind:class="{active:tab==2}">
            <span>自定义</span>
        </a>
    </div>
    <div id="tab_con" class="container">
        <div class="tab_item default" v-if="tab==1">
            <div class="poster_bg" id="a">
                <img class="img" :src="image" alt="">
                <div class="info flex bg-white">
                    <div class="flex1">
                        <div class="flex">
                            <img class="avatar"
                                 :src='info.avatar' alt="">
                            <div class="flex1">
                                <div class="name">{{info.name}} <span>{{info.position}}</span></div>
                                <div class="company">{{info.company}}</div>
                            </div>
                        </div>
                        <div class="phone">Tel <span>{{info.phone}}</span></div>
                    </div>
                    <div class="code">
                        <img :src="info.code" alt="">
                        <p class="s_code tc">扫码进入名片</p>
                    </div>
                </div>
            </div>
            <div class="btn-wrap flex">
                <div class="button flex1 tc" v-on:click="changeImg">换一张</div>
                <!--<div class="button blue flex1 tc" v-on:click="createPosters(0)">生成海报</div>-->
                <div class="button blue flex1 tc" id="saveImg1">生成海报</div>
            </div>
        </div>
        <div class="tab_item custom" v-if="tab==2">
            <div class="poster_bg2" id="b">
                <div class="img inputImg">
                    <input type="file" v-on:change="onFile" accept="image/">
                    <img class="self_img" :src="self_img" alt="">
                </div>
                <div class="info flex bg-white">
                    <div class="flex1">
                        <div class="flex">
                            <img class="avatar"
                                 :src='info.avatar' alt="">
                            <div class="flex1">
                                <div class="name">{{info.name}} <span>{{info.position}}</span></div>
                                <div class="company">{{info.company}}</div>
                            </div>
                        </div>
                        <div class="phone">Tel <span>{{info.phone}}</span></div>
                    </div>
                    <div class="code">
                        <img :src="info.code" alt="">
                        <p class="s_code tc">扫码进入名片</p>
                    </div>
                </div>
            </div>

            <div class="btn-wrap" v-on:click="createPosters(1)">
                <div class="button create_btn blue tc">生成海报</div>
            </div>
            <!--<div class="btn-wrap" id="saveImg">-->
                <!--<div class="button create_btn blue tc">生成海报</div>-->
            <!--</div>-->
        </div>
    </div>
    <div class="img-wrap tc">
        <div class="image"></div>
        <div class="save_wrap flex">
            <div class="save_btn hold flex1">长按图片保存至相册</div>
            <div class="save_btn return flex1">返回</div>
        </div>
    </div>
    </div>
</div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>

    <script type="text/javascript">
        $(function(){
//            function saveImg() {
            $("#saveImg1").click(function(){
                var copyDom=$(".poster_bg")
                var width = copyDom.width(); //获取dom 宽度
                var height = copyDom.height(); //获取dom 高度
                var canvas = document.createElement("canvas"); //创建一个canvas节点
                var scale = 3; //定义任意放大倍数 支持小数
                canvas.width = width * scale; //定义canvas 宽度 * 缩放
                canvas.height = height * scale; //定义canvas高度 *缩放
//                canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
                var content = canvas.getContext("2d");
                content.scale(scale,scale);
                var rect = copyDom.get(0).getBoundingClientRect();//获取元素相对于视察的偏移量
                content.translate(-rect.left,-rect.top);//设
                html2canvas(document.getElementById('a'), {
                    useCORS: true,
                    scale: scale, // 添加的scale 参数
                    canvas: canvas, //自定义 canvas
                    width: width, //dom 原始宽度
                    height: height,
                }).then(function (canvas) {
                    var context = canvas.getContext('2d');
                    context.mozImageSmoothingEnabled = false;
                    context.webkitImageSmoothingEnabled = false;
                    context.msImageSmoothingEnabled = false;
                    context.imageSmoothingEnabled = false;
                    var url = canvas.toDataURL();
                    $('<img/>').attr({
                        src: url,
                        width: width,
                        height,
                    }).appendTo($('.image'));
                });
                $('.img-wrap').show()
                $('#tab_con,#tab').hide()
            });
//            $("#saveImg1").click(function(){
//                html2canvas($(".poster_bg"), {
//                    useCORS:true,
//                    logging:true,
//                    onrendered: function(canvas) {
//                        var url = canvas.toDataURL();
//                        var html = '';
//                        html+='<img src="'+url+'">'
//                        $('.image').append(html)
////                        var a = document.createElement('a')
////                        // 创建一个单击事件
////                        var event = new MouseEvent('click')
////                        // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
////                        a.download = '截图.png';
////                        // 将生成的URL设置为a.href属性
////                        a.href = url;
////                        // 触发a的单击事件
////                        a.dispatchEvent(event);
//                    }
//                });
//                $('.img-wrap').show()
//                $('#tab_con,#tab').hide()
//            });
            $('.return').click(function(){
                $('.img-wrap').hide()
                $('#tab_con,#tab').show()
//                $('.image').html('')
                location.reload();
            });
        });

        var app = new Vue({
            el: '#app',
            data: {
                save_img:false,
                tab: 1,
                image: '',
                self_img:'',
                default_img_id:'',
                loading:true,
                info:{
                    name:'',
                    position:'',
                    company:'',
                    avatar:'',
                    phone:'',
                    poster_material_id:''
                },
                qiniu: {
                    token: '',
                    url: 'https://upload.qiniup.com/'
                },
            },
            created: function () {
                this.loadData()
            },
            methods: {
                setTab:function(t){
                    this.tab = t;
                },
                loadData: function () {
                    var id = sessionStorage.getItem('login_identifier')
                    axios({
                        method:'get',
                        url:'https://qyim.ec51.com/v1/check/poster',
                        params :{
                            id:id
                        },
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                        }
                    }).then(res=>{
                        this.loading=false
                        this.info.name=res.data.data.name
                        this.info.position=res.data.data.position
                        this.info.company=res.data.data.company.name
                        this.info.avatar=res.data.data.avatar
                        this.info.phone=res.data.data.mobile
                        this.info.code=res.data.data.qr_code
                        this.info.poster_material_id=res.data.data.poster_material_id
                        this.image=res.data.data.poster_background
                        this.loadImg()
                    });
                },
                loadImg:function(){
                    var fd=new FormData()
                    fd.append('image_url',this.info.avatar)
                    axios.post('https://qyim.ec51.com/v1/check/base64-image',fd).then(res=>{
                        this.info.avatar=res.data.data.base64_image
                    })
                },
                changeImg: function () {
    //                this.image = this.img[Math.floor(Math.random() * this.img.length)];
    //                location.reload();
                    axios({
                        url:'https://qyim.ec51.com/v1/check/push-poster',
                        method:'get',
                    }).then(res=>{
                        console.log(res)
                        this.image=res.data.data.card_material_picture
                        this.default_img_id=res.data.data.id
                    })
                },
                onFile: function (evt) {
                    var file = evt.target.files[0];

                    var upload = function () {
                        var data = new FormData();
                        data.append('token', this.qiniu.token);
                        data.append('file', file);
                        data.append('key', new Date().getTime() + Math.ceil(Math.random() * 10000));
                        axios({
                            url: this.qiniu.url,
                            method: "post",
                            data: data,
                            headers: {
                                'Content-Length': file.size
                            }
                        }).then(result => {
                            // 上传成功
                            this.self_img = 'https://pimg.ec51.com/' + result.data.key
                        })
                    }.bind(this)


                    if (this.qiniu.token) {
                        // 如果已经获取过token，则直接上传文件
                        upload();
                    } else {
                        // 否则先获取token，再上传
                        axios({
                            url: 'https://qyim.ec51.com/v1/check/qiniu-token',

                        }).then(res => {
                            this.qiniu.token = res.data.data;
                            upload();
                        })
                    }
                },
                createPosters:function(b){
                    var id = sessionStorage.getItem('login_identifier')
                    var img=''
                    var creat=function(){
                        var data=new FormData()
                        data.append('poster_background_type',b)
                        data.append('poster_background_img',img)
                        data.append('poster_material_id',this.default_img_id||this.info.poster_material_id)
                        axios({
                            url:'https://qyim.ec51.com/v1/check/replace-poster?id='+id,
                            method:'post',
                            data:data,
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded',
                            }
                        }).then(result=>{
//                            alert('生成海报成功！')
                        })
                    }.bind(this)
                    if(b==0){
                        img=this.info.poster_material_id
                        creat()
                    }
                    if(b==1&&!this.self_img){
                        alert('请上传图片')
                    }else{
                        img=this.self_img
                        creat()
                        var copyDom=$(".poster_bg2")
                        var width = copyDom.width(); //获取dom 宽度
                        var height = copyDom.height(); //获取dom 高度
                        var canvas = document.createElement("canvas"); //创建一个canvas节点
                        var scale = 3; //定义任意放大倍数 支持小数
                        canvas.width = width * scale; //定义canvas 宽度 * 缩放
                        canvas.height = height * scale; //定义canvas高度 *缩放
                        var content = canvas.getContext("2d");
                        content.scale(scale,scale);
                        var rect = copyDom.get(0).getBoundingClientRect();//获取元素相对于视察的偏移量
                        content.translate(-rect.left,-rect.top);//设
                        html2canvas(document.getElementById('b'), {
                            useCORS: true,
                            scale: scale, // 添加的scale 参数
                            canvas: canvas, //自定义 canvas
                            width: width, //dom 原始宽度
                            height: height,
                        }).then(function (canvas) {
                            var context = canvas.getContext('2d');
                            context.mozImageSmoothingEnabled = false;
                            context.webkitImageSmoothingEnabled = false;
                            context.msImageSmoothingEnabled = false;
                            context.imageSmoothingEnabled = false;
                            var url = canvas.toDataURL();
                            $('<img/>').attr({
                                src: url,
                                width: width,
                                height,
                            }).appendTo($('.image'));
                        });
                        $('.img-wrap').show()
                        $('#tab_con,#tab').hide()
//                        html2canvas($(".poster_bg2"), {
//                            useCORS:true,
//                            logging:true,
//                            onrendered: function(canvas) {
//                                var url = canvas.toDataURL();
//                                var html = '';
//                                html+='<img src="'+url+'">'
//                                $('.image').append(html)
//                            }
//                        });
//                        $('.img-wrap').show()
//                        $('#tab_con,#tab').hide()
                    }
                }
            }
        })
    </script>
    </body>
    </html>